<script>
import BottomTab from "@/conponents/BottomTab.vue";
import requestUtil from "@/utils/RequestUtil";

export default {
  name: "TypeIndex",
  components: {BottomTab},
  data() {
    return {
      activeKey: 0,
      allItem: [],
      sidebarItems: [],
      activeItem: []
    }
  },
  watch: {
    activeKey: function (val) {
      this.activeItem = this.allItem?.filter(item => {
        return item.typeDependKey == this.sidebarItems[val]?.id;
      })
    }
  },
  methods: {
    onSidebarClick: (index) => {
      console.log(index)
    },
    init() {
      requestUtil.get('/getTypeAll').then(res => {
        let result = res.data
        if (result.code !== 1) {
          console.log('this is error')
        }
        this.allItem = result.data
        this.sidebarItems = result.data.filter(item => item.typeDepend === '0')
        this.activeItem = this.allItem?.filter(item => {
          return item.typeDependKey == this.sidebarItems[this.activeKey]?.id;
        })
      })
    },
  },
  mounted() {
    this.init()
  }
}
</script>

<template>
  <div style="background-color: rgb(248,248,248)">
    <header
        style="height: 50px;font-size: 1.3rem;font-weight: bold;display: flex;justify-content: center;align-items: center;background-color: white">
      分类
    </header>
    <div style="display: flex;justify-content: space-between;height: calc(100vh - 100px)">
      <van-sidebar v-model="activeKey" style="height: 100%" @change="onSidebarClick">
        <van-sidebar-item v-for="item in sidebarItems" :key="item.typeKey" :title="item.typeName"/>
      </van-sidebar>
      <div class="item">
        <van-grid :border="false" :gutter="10" column-num="2">
          <van-grid-item v-for="item in activeItem" :key="item.typeKey">
            <img :alt="item.typeName" :src="item.typeImg" width="100%">
            <span style="margin-top: 5px;font-weight: bolder">{{ item.typeName }}</span>
          </van-grid-item>
        </van-grid>
      </div>
    </div>
    <BottomTab/>
  </div>
</template>

<style scoped>
.item {
  flex: 1;
  padding: 10px 0 0 10px;
}

:deep(.van-sidebar) {
  width: 100px;
}
</style>